<template>
	<div :class="$style.wrapper">
		<span :class="$style.label">股票代码</span>
		<input
			:class="$style.search"
			v-model="buyStockCode"
			ref="search"
			placeholder="输入代码/拼音">

		<div :class="$style.stockname" @click="clickStock">{{ buyStockName }}</div>

		<div
			:class="$style.results"
			:style="resultsStyle"
			v-show="showResults">
			<p>查询结果</p>
			<ul>
				<li
					v-for="stock in stockResults"
					@click="chooseStock(stock)">
					<div :class="$style.code">
						<span :class="$style.sh">{{ stock.stockCode.slice(0, 2) }}</span>
						{{ stock.stockCode.slice(2) }}
					</div>
					<div :class="$style.name">
						{{ stock.stockName }}
					</div>
				</li>
			</ul>
		</div>

	</div>
</template>

<script>
	import RemoteDAO from '../../../common/remoteDAO'
	import LocalDAO from '../../../common/localDAO'

	export default {
		data () {
			return {
				stockResults: []
			}
		},

		computed: {
			resultsStyle () {
				return {
					width: window.innerWidth + 'px'
				}
			},

			buyStockCode: {
				get () {
					return this.$store.state.buyStockCode
				},
				set (value) {
					this.$store.dispatch('setBuyStockCode', value)
				}
			},

			buyStockMarket () {
				return this.$store.state.buyStockMarket
			},

			buyStockName () {
				return this.$store.state.buyStockName
			},

			showResults () {
				return this.$store.state.buySearchResultsVisible
			}
		},

		beforeDestroy () {
			if (this._interval)
				clearInterval(this._interval)
		},

		methods: {
			chooseStock (stock) {
				this.reloadFivePrices(stock)
				this.$store.dispatch('setBuyDelegateType', '1')
				this.$store.dispatch('setBuyStockCode', stock.stockCode.slice(2))
				this.$store.dispatch('setBuyStockMarket', stock.stockCode.slice(0, 2))
				this.$store.dispatch('setBuyStockName', stock.stockName)
				this.$store.dispatch('setBuyAmount', '')
				this.$store.dispatch('setBuySearchResultsVisible', false)
			},

			clickStock () {
				RemoteDAO.callStockLive(this.buyStockMarket + this.buyStockCode, "ordinary", !!LocalDAO.getUserCode() ? '1' : '0')
			},

			reloadFivePrices (stock) {
				if (this._interval) {
					clearInterval(this._interval)
				}

				setTimeout(() => {
					RemoteDAO.callNativeFivePrice(stock.stockCode, results => {
						const { data } = results
						if (isNaN(data.latestPrice) ||  Number(data.latestPrice) === 0) {
							this.$store.dispatch('setTip', { text: '该股票已停牌或退市了' })
							this.$store.dispatch('setBuyDelegatePrice', '')
							this.$store.dispatch('setBuyFivePrices', {})
							this.$store.dispatch('setBuyAmount', 0)
						} else {
							this.$emit('setfifth', results.data)
							this.$emit('startroll', stock.stockCode)

							// this._interval = setInterval(() => {
							// 	RemoteDAO.callNativeFivePrice(stock.stockCode, _results => {
							// 		this.$emit('setfifth', _results.data)
							// 	})
							// }, 5000)
						}
					})
				}, 100)
			},

			blur () {
				setTimeout(() => {
					this.$store.dispatch('setBuySearchResultsVisible', false)
				}, 50)
			}
		},

		watch: {
			buyStockCode (val, preVal) {
				if (val.length > 1) {
					if (Math.abs(val.length - preVal.length) !== 1) return
					this.$store.dispatch('setBuySearchResultsVisible', true)
					RemoteDAO.callNativeSearchStock(val, results => {
						this.stockResults = results.data
					})
				} else {
					this.$store.dispatch('setBuySearchResultsVisible', false)
				}
			}
		}
	}
</script>

<style module lang="less">

	.wrapper {
		display: -webkit-box;
		position: relative;
	}

	.label {
		color: #FFF;
		display: inline-block;
		height: 40px;
		font-size: 14px;
		line-height: 45px;
	}

	.search {
		border: none;
		position: relative;
		display: block;
		-webkit-box-flex: 1;
		font-size: 16px;
		margin-top: 12px;
		margin-left: 25px;
		height: 20px;
		line-height: 20px;
		color: #FFF;
		background: transparent;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);

	}

	.search::-webkit-input-placeholder {
		// color: #F2CBCB;
		font-size: 15px;
		color:#ffffff;
		opacity: 0.8;
	}

	.results {
		position: absolute;
		z-index: 9;
		overflow-y: scroll;
		left: -15px;
		top: 100%;
		margin-top: -8px;
		background-color: #FFF;
		margin-bottom: 80px;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.stockname {
		position: absolute;
		right: 0;
		top: 10px;
		font-size: 15px;
		color: #fff;
	}

	.results p {
		text-align: center;
		padding: 16px 0;
		color: #565656;
		background-color: #F4F4F4;
		margin: 0;
	}

	.results ul {
		padding: 0;
	}

	.results li {
		list-style: none;
		padding: 14px 15px;
		border-bottom: 1px solid #EEE;
		display: -webkit-box;

		&:active {
			background-color: #eee;
		}
	}

	.sh {
		color: #FFF;
		background-color: #3AA5ED;
		padding: 2px 3px;
		border-radius: 3px;
	}

	.code {
		-webkit-box-flex: 1;
		color: #565656;
	}

	.name {
		color: #565656;
		font-size: 14px;
	}
</style>
